<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 遍历数组</title>
</head>
<body>
<div id="app">
    <ul>
        <li>{{ array[0] }}</li>
        <li>{{ array[1] }}</li>
        <li>{{ array[2] }}</li>
        <li>{{ array[3] }}</li>
    </ul>

    <ul>
        <!--将需要重复的元素中添加 v-for 属性-->
        <!--item 自定义变量，array 要遍历的数组-->
        <!--变量 in shuzu-->
        <li v-for="item in array">{{ item }}</li>
    </ul>


    <ul>
        <!--第一个变量为数组内容，最后一个为索引值-->
        <li v-for="(item,index) in array">{{index}}.{{item}}</li>
    </ul>
</div>

<script type="module">
    import {createApp, reactive} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let array = ["张三", "李四", "王五", "赵六"]
                return {
                    array
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>